<template>
    <div class="add-game-wrap" v-loading="loading">
        <div class="add-game-box">
            <div class="input-box">
                <el-input
                    placeholder="请输入你要搜索的游戏"
                    @keyup.enter.native="getGame(1)"
                    style="width:220px;"
                    clearable
                    v-model.trim="paramsList.keyword">
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
                <el-button type="success" class="btn" @click="getGame(1)">搜索</el-button>
            </div>
            <div class="input-box">
                <span class="input-title" style="margin-left: 0px">游戏状态</span>
                <el-select @change="selectChange" style="width:115px;" v-model="paramsList.status">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="可下载" :value="1"></el-option>
                    <el-option label="不可下载" :value="0"></el-option>
                    <el-option label="下架" :value="-1"></el-option>
                </el-select>
                <span class="input-title">审核状态</span>
                <el-select @change="selectChange" style="width:150px;" v-model="paramsList.approveStatus">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="待审核" :value="0"></el-option>
                    <el-option label="审核完成" :value="1"></el-option>
                </el-select>
                <span class="input-title">包类型</span>
                <el-select @change="selectChange" style="width:115px;" v-model="paramsList.pkgType">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="主包" :value="0"></el-option>
                    <el-option label="分包" :value="1"></el-option>
                    <el-option label="雷同包" :value="2"></el-option>
                </el-select>
                <span class="input-title">宣传视频</span>
                <el-select @change="selectChange" style="width:115px;" v-model="paramsList.hasVideo">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option label="有" :value="1"></el-option>
                    <el-option label="没有" :value="0"></el-option>
                </el-select>
            </div>
            <div class="input-box">
            </div>
        </div>

        <div class="table-box">
            <el-table :data="tableData" height="350" ref="table" border style="width: 100%" @selection-change="selectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column min-width="120" label="游戏icon">
                    <template slot-scope="scope">
                        <div class="cover">
                            <img :src="scope.row.appIcon">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" prop="appName" label="游戏名称"></el-table-column>
                <el-table-column min-width="100" label="宣传视频">
                    <template slot-scope="scope">
                        <span v-if="scope.row.videoId">有</span>
                        <span v-else>无</span>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" prop="appCategoryName" label="游戏类型"></el-table-column>
                <el-table-column min-width="100" label="游戏标签">
                    <template slot-scope="scope">
                        <span v-for="(item, index) in scope.row.adminGameTagList" :key="index">
                            {{ item.tag }}<i v-if="index < scope.row.adminGameTagList.length -1">,</i>
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="游戏状态" width="100">
                    <template slot-scope="scope">
                        <div style="color: #67C23A;" v-if="scope.row.status === 1">
                            <span>可下载</span>
                        </div>
                        <div style="color:#F56C6C;" v-if="scope.row.status === 0">
                            <span>不可下载</span>
                        </div>
                        <div style="color:#F56C6C;" v-if="scope.row.status === -1">
                            <span>下架</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" width="100">
                    <template slot-scope="scope">
                        <div style="color:#F56C6C;" v-if="scope.row.approveStatus === 0">
                            <span>待审核</span>
                        </div>
                        <div style="color: #67C23A;" v-if="scope.row.approveStatus === -1">
                            <span>审核完成</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="tools">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageIndex"
                :page-sizes="_pageSizes"
                :page-size="pageNum"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        <div class="btn-wrap">
            <el-button type="primary" @click="cancel">取消</el-button>
            <el-button type="primary" @click="submit">确定</el-button>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'
export default {
    props: {
        dialogVisible: false,
        isShow: false,
        chooseGame: {
            type: Function,
            default: null
        },
        dialogClose: {
            type: Function,
            default: null
        }
    },
    data () {
        return {
            paramsList: {
                pkgType: null,
                hasVideo: null,
                approveStatus: 0,
                status: null
            },
            gameList: [],
            tableData: [],
            pageIndex: 1,
            pageNum: 10,
            total: 0,
            loading: false
        }
    },
    created () {
        this.getGame(1)
    },
    watch: {
        isShow (val) {
            if (val) {
                this.tableData = []
                this.getGame(1)
            }
        }
    },
    methods: {
        // 获取列表
        async getGame (pageIndex) {
            if (this.loading) return
            this.pageIndex = pageIndex
            this.loading = true
            let params = {
                pageIndex,
                pageNum: this.pageNum
            }
            params = Object.assign(params, this.paramsList)
            let res = await this.$http.post('/game/findGames', params)
            if (res.code === '0') {
                this.tableData = res.data
                this.total = res.count
            } else {
                this.$message({
                    type: 'error',
                    message: '系统异常，请稍后再试'
                })
            }
            this.loading = false
        },
        selectionChange (val) {
            this.chooseList = val
            this.gameList = []
            val.map(item => {
                this.gameList.push({
                    gameid: item.gameid,
                    appName: item.appName
                })
            })
        },
        selectChange () {
            this.type = ''
            this.sort = ''
            this.$refs.table.clearSort()
            this.getGame(1)
        },
        submit () {
            this.chooseGame(this.gameList)
        },
        cancel () {
            this.dialogClose()
        },
        // 页码切换
        sizeChange (val) {
            this.pageIndex = 1
            this.pageNum = val
            this.getGame(1)
        },
        // 页容切换
        pageChange (val) {
            this.pageIndex = val
            this.getGame(this.pageIndex)
        }
    },
    filters: {
        timeInit (val) {
            if (val) {
                return formatDate(val, 'YYYY-MM-DD HH:MM:SS')
            } else {
                return '至今'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    .add-game-wrap {
        .add-game-box {
            max-width: 800px;
        }
        .input-box {
            margin-top: 10px;
            font-size: 13px;
            font-weight: 500;
            .input-title {
                margin: 0 10px 0 20px;
            }
            .btn {
                margin-top: 10px;
                margin-left: 10px;
            }
        }

        .table-box {
            margin: 20px 0;
            .cover {
                width: 80px;
                height: 80px;
                > img {
                    width: 100%;
                    height: 100%;
                }
            }
            .desc {
                overflow: hidden;
                line-height: 20px;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                display: -webkit-box;
                height: 100px;
            }
            .user-icon {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 5px;
                vertical-align: top;
            }
            .table-btn {
                cursor: pointer;
                color: #409EFF;
                font-size: 13px;
                font-weight: 500;
                &:hover {
                    text-decoration: underline;
                }
            }
            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }
        }

        .tools {
            padding-right: 20px;
            display: flex;
            justify-content: flex-end;
        }
        .btn-wrap {
            display: flex;
            margin-top: 20px;
            justify-content: space-around;
        }
    }
</style>
